<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, PropType, ref, Ref, reactive, watchEffect } from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  name: 'bar',
  props: {
    chartData: {
      type: Array,
      default: () => [],
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    width: {
      type: String as PropType<string>,
      default: '90%',
    },
    height: {
      type: String as PropType<string>,
      default: 'calc(100vh - 78px)',
    },
    // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
    seriesColor: {
      type: String,
      default: '#1890ff',
    },
    // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
    // 新增 grid 属性
    grid: {
      type: Object,
      default: () => ({
        left: 2,
        right: 2,
        bottom: 2,
        top: 2,
      }),
    },
  },
  setup(props) {
    const chartRef = ref<HTMLDivElement | null>(null);
    const { setOptions, echarts } = useECharts(chartRef as Ref<HTMLDivElement>);
    const option = reactive({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
          label: {
            show: true,
            backgroundColor: '#333',
          },
        },
      },
      xAxis: {
        type: 'category',
        data: [],
      },
      yAxis: {
        type: 'value',
        nameTextStyle: {
            rotate: 30, // 旋转30度
            padding: [0, 0, 0, 20] // 增加padding以适应旋转后的名称
        },
      },
      series: [
        {
          name: 'bar',
          type: 'bar',
          data: [],
          color: props.seriesColor,
        },
      ],
      // 使用 grid 属性
      grid: props.grid,
    });

    watchEffect(() => {
      props.chartData && initCharts();
    });

    function initCharts() {
      if (props.option) {
        Object.assign(option, cloneDeep(props.option));
      }
      let seriesData = props.chartData.map((item) => {
        return item.value;
      });
      let xAxisData = props.chartData.map((item) => {
        return item.name;
      });
      option.series[0].data = seriesData;
      // update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
      option.series[0].color = props.seriesColor;
      // update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】首页默认及echars颜色调整
      option.xAxis.data = xAxisData;
      setOptions(option);
    }
    return { chartRef };
  },
});
</script>
